程式概念

為我們的project加上shorts中常見的header，這裡會用到的是之前提過的便於修改UI的工具：material UI，如果對它的記憶太模糊/不太清楚，可以去看本次挑戰Day6的介紹。

首先，為專案輸入command line來執行material UI的下載(npm install @material-ui/core @material-ui/icons)，部分電腦可能報錯，是因為npm版本差異的問題，可以在最後加上--force完成指令操作。

接著，在component的資料夾中新開一個VideoHeader.js來處理我們今天要實做的東西，將material-ui import近來。

本次的實作很單純，是為原先建立好的影片加上一個返回的icon + shorts的標記 + 相機的icon，搜尋material ui的icon庫可以找到如何放上。

但是在將這個component放回VideoCard時，要浮動在影片上，才是考驗css的問題。這裡複習一下css中position的概念：

在CSS中，position 屬性用於控制元素的定位方式，它可以接受以下幾個值：static、relative、absolute、fixed 和 sticky。這些值決定了元素在文檔中的位置以及與其他元素的關係。下面是 position 屬性的一些常見值的說明：

• static（默認值）：
  component的定位方式是正常的，即component出現在文檔流中，不受 top、right、bottom 和 left 屬性的影響。
  component不會被特殊定位，按照文檔流的順序排列。

• relative：
  component的定位相對於其正常位置，但它仍然保持在文檔流中。
  使用 top、right、bottom 和 left 屬性可以調整component相對於其正常位置的偏移。

• absolute：
  component的定位相對於其最近的已定位祖先component（不包括 static 定位的祖先component）。
  如果沒有已定位的祖先component，則相對於文檔的初始包含塊定位。
  使用 top、right、bottom 和 left 屬性可以調整元素相對於其定位祖先的偏移。

• fixed：
  component的定位相對，它不會隨著頁面的滾動而移動。
  使用 top、right、bottom 和 left 屬性可以調整component相對的偏移。

• sticky：
  component在特定的卷動位置之前是正常定位的，之後變為固定定位。
  使用 top、right、bottom 和 left 屬性可以調整元素在固定定位後相對於父component的偏移。
  想清楚position的paramater，就可以開始今日的實作拉~

完整code

// VideoHeader.js
import React from 'react'
import './VideoHeader.css'
import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos'
import CameraAltOutlinedIcon from '@material-ui/icons/CameraAltOutlined'

const VideoHeader = () => {
    return (
        <div className='videoHeader'>
            <ArrowBackIosIcon />
            <h3>Shorts</h3>
            <CameraAltOutlinedIcon />
        </div>
    )
}
export default VideoHeader

// VideoHeader.css
.videoHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    width: 100%;
    color: white;
}

.videoHeader>* {
    padding: 20px;
}

最後，在VideoCard.js中import VideoHeader、應用於其中就可以了。